<template>
  <div :id="id"
    class="divlabel-container">
    <div class="animate-maker-border"
      @click="closeClick">
      <span class="animate-marker__text">{{ title }}</span>
    </div>

  </div>
</template>
 
<script>
  export default {
    name: 'DynamicLabel',
    data() {
      return {};
    },
    props: {
      title: {
        type: String,
        default: '标题'
      },
      id: {
        type: String,
        default: '001'
      }
    },
    methods: {
      closeClick() {
        if (this.closeEvent) {
          this.closeEvent();
        }
      }
      // closeClick() {
      //   this.$emit('closeEvent');
      // }
    }
  };
</script>
 
 
<style lang="scss" scoped>
  .divlabel-container,
  .divlabel-container::before,
  .divlabel-container::after {
    position: absolute;
    left: 0;
    bottom: 0;
    // 使用这个样式，label的所有事件会被禁用
    // pointer-events: none;
    cursor: pointer;
  }
  .animate-maker-border,
  .animate-maker-border::before,
  .animate-maker-border::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .animate-maker-border {
    width: 150px;
    height: 30px;
    margin: 0;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }
  .animate-maker-border::before,
  .animate-maker-border::after {
    content: '';
    z-index: 10;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .animate-maker-border::before {
    animation-delay: -4s;
  }
  @keyframes clipMe {
    0%,
    100% {
      clip: rect(0px, 170px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 47px, 0px);
    }
    50% {
      clip: rect(45px, 170px, 47px, 0px);
    }
    75% {
      clip: rect(0px, 170px, 47px, 45px);
    }
  }
  .animate-marker__text {
    color: #fff;
    font-size: 14px;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    user-select: none;
    cursor: pointer;
    background: rgba(0, 173, 181, 0.32);
  }
</style>